<template>
    <div class="bg">
        <span @click="handlePush">点击跳过{{ timer }}s</span>
    </div>
</template>

<script setup>
import { onUnmounted, ref} from "vue"
import { useRouter } from 'vue-router'
const router = useRouter()
const timer = ref(5)
// 设置跳转,当跳转的时候要停止循环
const interval = setInterval(() => {
    timer.value--
    if (!timer.value) {
        router.push({ path: '/music' })
    }
    console.log(timer.value);
}, 1000);
// 执行跳转的函数
function handlePush(){
    router.push({ path: '/music' })
}
// 当页面卸载的时候,卸载循环
onUnmounted(() => {
    clearInterval(interval)
})
// // 设置5s跳转
// setTimeout(() => {
//     timer.value
// },5000)
</script>

<style lang="stylus" scoped>
.bg
    width 399px
    height 600px
    background-image:url('/src/assets/bg.png')
    margin: 30px auto
    border-radius 10px
    span
        color #fff
        background-color:rgba(0,0,0,0.6)
        float right
        padding 5px
        margin 15px
        border-radius 10px
</style>